import { nextTick, ref, watch } from 'vue'

export function useDrawer() {
  const show_drawer = ref(false)

  watch(show_drawer, (bool) => {
    const root = document.documentElement

    if (bool) {
      root.style.setProperty('overflow', 'hidden')
    } else {
      root.style.removeProperty('overflow')
    }

    nextTick(() => {
      const el = root.querySelector('.arco-modal-wrapper')
      el?.setAttribute('style', 'overflow-y: hidden')
    })
  })

  return {
    show_drawer
  }
}
